<template>
  <div class="detail-container">
    <div class="detail">
      <div class="title-wrapper">
        <h1 class="title">{{ topicDetail.title }}</h1>
        <div class="author-info">
          {{
            topicDetail.user_name +
              '・' +
              topicDetail.create_time +
              '・' +
              topicDetail.pv +
              '点击'
          }}
        </div>
      </div>
      <div class="content">{{ topicDetail.content }}</div>
    </div>
    <div class="replies">
      <div class="summary">共 {{ totalRecord }} 条回复</div>
      <div v-if="totalRecord === 0" class="no-reply">暂无回复</div>
      <div class="reply" v-for="r in replies" :key="r.id">
        <div class="user-img"></div>
        <div class="user-content">
          <div class="username">
            <span>
              {{ r.username }}
            </span>
            <span class="create_time">
              {{ r.create_time }}
            </span>
          </div>
          <div class="reply-content">{{ r.content }}</div>
        </div>
      </div>
    </div>
    <div class="add-reply">
      <div class="add-title">添加一条回复</div>
      <div class="add-content">
        <textarea class="add-input" v-model="addContent"></textarea>
      </div>
      <button class="reply-button" @click="reply">回复</button>
    </div>
  </div>
</template>

<script>
import { getDetail } from '@/api'
import { Toast } from '@/components/Toast'
import { mapGetters } from 'vuex'
import { addReply } from '@/api'
export default {
  name: 'Detail',
  data() {
    return {
      topicDetail: {},
      replies: {},
      totalRecord: 0,
      pageNumber: 1,
      addContent: ''
    }
  },

  computed: {
    ...mapGetters({
      getUser: 'user/getUser'
    })
  },
  mounted() {
    const { id } = this.$route.query
    this.getDetailApi(id)
  },

  methods: {
    // 获取详情
    async getDetailApi(id) {
      const res = await getDetail(id)
      if (res.code === 200) {
        const { topicDetail, replyPageDTO } = res.data
        this.topicDetail = topicDetail
        this.replies = replyPageDTO.list
        this.totalRecord = replyPageDTO.totalRecord
        this.pageNumber = replyPageDTO.pageNumber
      }
    },

    // 回复
    reply() {
      if (!this.addContent) {
        Toast({
          type: 'warning',
          text: '回复不能为空'
        })
      } else if (!this.getUser) {
        Toast({
          type: 'warning',
          text: '请先登录'
        })
      } else {
        this.replyApi()
      }
    },

    async replyApi() {
      const params = {
        topicId: this.topicDetail.id,
        content: this.addContent
      }
      const res = await addReply(params).catch(err => {
        console.log(err)
        Toast({
          type: 'error',
          text: '回复出错'
        })
      })
      if (res.code === 200) {
        Toast({
          type: 'success',
          text: '回复成功'
        })
        this.getDetailApi(this.$route.query.id)
        this.addContent = ''
      }
    }
  }
}
</script>

<style scoped>
.detail-container {
  padding: 20px 0;
}
.detail {
  max-width: 980px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}
.title-wrapper {
  padding: 15px;
  border-bottom: 1px solid #e2e2e2;
}
.title {
  font-size: 24px;
  font-weight: 500;
  line-height: 150%;
}
.author-info {
  margin-top: 10px;
  color: #778087;
  font-size: 13px;
}
.content {
  padding: 25px 15px 50px 15px;
}

.replies,
.add-reply {
  max-width: 980px;
  margin: 20px auto;
  background-color: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}
.summary {
  padding: 10px 15px;
  font-size: 14px;
  color: #999;
  border-bottom: 1px solid #e2e2e2;
}

.no-reply {
  padding: 20px 0;
  text-align: center;
  font-size: 16px;
}

.reply {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #e2e2e2;
}
.reply:last-child {
  border: none;
}
.user-img {
  display: inline-block;
  width: 48px;
  height: 48px;
  border: 1px solid #e2e2e2;
  border-radius: 3px;
}
.user-content {
  margin-left: 10px;
}
.user-content .username {
  padding: 5px 0;
  font-size: 14px;
  color: gray;
}
.reply-content {
  margin-top: 5px;
  font-size: 14px;
}
.username .create_time {
  margin-left: 10px;
}

.add-title {
  padding: 10px 15px;
  font-size: 14px;
  color: gray;
  border-bottom: 1px solid #e2e2e2;
}
.add-content {
  padding: 15px;
}
.add-input {
  width: calc(100% - 30px);
  height: 110px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 14px;
}

.reply-button {
  margin: 10px 15px 30px;
  padding: 4px 8px;
  color: #333;
  background-color: #fff;
  font-size: 14px;
  border: 1px solid rgba(80, 80, 90, 0.2);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(66, 66, 77, 0.1);
  cursor: pointer;
}
.reply-button:focus {
  outline: none;
}
.reply-button:active {
  background-color: #e9e9e9;
}
</style>
